<?php

use \app\assets\BackendAsset as Asset;
use \app\models\tableModel\AdminRoleModel;

/* @var $this yii\web\View */
/* @var $model app\models\tableModel\NewsCategoryModel */
/* @var $form yii\widgets\ActiveForm */

?>
<el-main class="content-wrapper no-pl no-pr no-border bg-gray">
    <el-form :model="form" :rules="formRules" ref="ruleForm" label-width="140px"
             class="form-600" label-position="left" :validate-on-rule-change="false">

        <el-tabs v-model="activeGroup" class="cate-main-tab">
            <el-tab-pane label="基础数据" name="base">
                <el-card shadow="hover" class="overflow-init">
                    <el-form-item label="标题" prop="name" class="form-item" :inline-message="true"
                                  :error="customErrMsg.name" ref="formItem_name">

                        <el-input type="textarea" placeholder="请输入标题" v-model="form.name"
                                  class="form-element" maxlength="100" show-word-limit type="string"
                                  :autosize="{ minRows: 3}">
                        </el-input>

                        <div class="form-element-append-inline" style="display: none;">
                            <el-tooltip class="item" effect="light"
                                        placement="top-start">
                                <div slot="content">
                                    行内说明内容
                                </div>
                                <div>
                                    <i class="el-icon-question font-second pointer"></i>
                                    <span class="font-third">
                                        什么是行内说明？
                                    </span>
                                </div>
                            </el-tooltip>
                        </div>
                        <div class="form-element-append lh-normal mt-5" style="display: none;">
                            <i class="el-icon-question font-second"></i>
                            <span class="font-third">
                                非行内说明文本
                            </span>
                        </div>

                    </el-form-item>

                    <el-form-item label="上级编号" prop="parent_id" class="form-item"
                                  :inline-message="true" :error="customErrMsg.parent_id"
                                  ref="formItem_parent_id">

                        <treeselect v-model="form.parent_id" :options="category.list"
                                    placeholder="请选择上级分类" noChildrenText="暂无分类"
                                    :load-options="loadChildren" ref="selectCate"
                                    class="form-element" :default-expand-level="99999">
                            <label slot="option-label" slot-scope="{ node }">
                                {{ node.raw.name }}
                            </label>
                            <label slot="value-label" slot-scope="{ node }">
                                {{ node.raw.name }}
                            </label>
                        </treeselect>

                        <div class="form-element-append-inline" style="display: none">
                            <el-tooltip class="item" effect="light"
                                        placement="top-start">
                                <div slot="content">
                                    行内说明内容
                                </div>
                                <div>
                                    <i class="el-icon-question font-second pointer"></i>
                                    <span class="font-third">
                            什么是行内说明？
                        </span>
                                </div>
                            </el-tooltip>
                        </div>
                        <div class="form-element-append lh-normal mt-5" style="display: none;">
                            <i class="el-icon-question font-second"></i>
                            <span class="font-third">
                        非行内说明文本
                    </span>
                        </div>

                    </el-form-item>

                    <el-form-item label="状态" prop="status" class="form-item" :inline-message="true"
                                  :error="customErrMsg.status" ref="formItem_status">

                        <el-radio-group v-model="form.status" size="mini" class="form-element">

                            <el-radio v-for="item in setting.status_list" :label="item.value">
                                {{item.text}}
                            </el-radio>

                        </el-radio-group>

                        <div class="form-element-append-inline" style="display: none;">
                            <el-tooltip class="item" effect="light"
                                        placement="top-start">
                                <div slot="content">
                                    行内说明内容
                                </div>
                                <div>
                                    <i class="el-icon-question font-second pointer"></i>
                                    <span class="font-third">
                                    什么是行内说明？
                                </span>
                                </div>
                            </el-tooltip>
                        </div>
                        <div class="form-element-append lh-normal mt-5" style="display: none;">
                            <i class="el-icon-question font-second"></i>
                            <span class="font-third">
                                非行内说明文本
                            </span>
                        </div>

                    </el-form-item>

                    <el-form-item label="是否显示" prop="is_show" class="form-item"
                                  :inline-message="true" :error="customErrMsg.is_show"
                                  ref="formItem_is_show">

                        <el-radio-group v-model="form.is_show" size="mini" class="form-element">

                            <el-radio v-for="item in setting.is_show_list" :label="item.value">
                                {{item.text}}
                            </el-radio>

                        </el-radio-group>

                        <div class="form-element-append-inline" style="display: none;">
                            <el-tooltip class="item" effect="light"
                                        placement="top-start">
                                <div slot="content">
                                    行内说明内容
                                </div>
                                <div>
                                    <i class="el-icon-question font-second pointer"></i>
                                    <span class="font-third">
                                    什么是行内说明？
                                </span>
                                </div>
                            </el-tooltip>
                        </div>
                        <div class="form-element-append lh-normal mt-5" style="display: none;">
                            <i class="el-icon-question font-second"></i>
                            <span class="font-third">
                                非行内说明文本
                            </span>
                        </div>

                    </el-form-item>

                    <el-form-item label="排序" prop="sort" class="form-item" :inline-message="true"
                                  :error="customErrMsg.sort" ref="formItem_sort">

                        <el-input v-model="form.sort" size="small" class="form-element"
                                  placeholder="请输入排序" type="number">
                        </el-input>

                        <div class="form-element-append-inline" style="display: none;">
                            <el-tooltip class="item" effect="light"
                                        placement="top-start">
                                <div slot="content">
                                    行内说明内容
                                </div>
                                <div>
                                    <i class="el-icon-question font-second pointer"></i>
                                    <span class="font-third">
                            什么是行内说明？
                        </span>
                                </div>
                            </el-tooltip>
                        </div>
                        <div class="form-element-append lh-normal mt-5" style="display: none;">
                            <i class="el-icon-question font-second"></i>
                            <span class="font-third">
                        非行内说明文本
                    </span>
                        </div>

                    </el-form-item>
                </el-card>

                <el-card shadow="hover">
                    <el-form-item label="链接类型" prop="url_type" class="form-item"
                                  :inline-message="true" :error="customErrMsg.url_type"
                                  ref="formItem_url_type">

                        <el-radio-group v-model="form.url_type" size="mini" class="form-element">

                            <el-radio v-for="item in setting.url_type_list" :label="item.value">
                                {{item.text}}
                            </el-radio>

                        </el-radio-group>

                        <div class="form-element-append-inline" style="display: none;">
                            <el-tooltip class="item" effect="light"
                                        placement="top-start">
                                <div slot="content">
                                    行内说明内容
                                </div>
                                <div>
                                    <i class="el-icon-question font-second pointer"></i>
                                    <span class="font-third">
                            什么是行内说明？
                        </span>
                                </div>
                            </el-tooltip>
                        </div>
                        <div class="form-element-append lh-normal mt-5" style="display: none;">
                            <i class="el-icon-question font-second"></i>
                            <span class="font-third">
                        非行内说明文本
                    </span>
                        </div>

                    </el-form-item>

                    <el-form-item label="链接" prop="url" class="form-item" :inline-message="true"
                                  :error="customErrMsg.url" ref="formItem_url"
                                  v-if="settingOver && form.url_type == setting.url_type_list.outside">

                        <el-input type="textarea" placeholder="请输入链接" v-model="form.url"
                                  class="form-element" maxlength="100" show-word-limit type="string"
                                  :autosize="{ minRows: 3}">
                        </el-input>

                        <div class="form-element-append-inline" style="display: none;">
                            <el-tooltip class="item" effect="light"
                                        placement="top-start">
                                <div slot="content">
                                    行内说明内容
                                </div>
                                <div>
                                    <i class="el-icon-question font-second pointer"></i>
                                    <span class="font-third">
                            什么是行内说明？
                        </span>
                                </div>
                            </el-tooltip>
                        </div>
                        <div class="form-element-append lh-normal mt-5" style="display: none;">
                            <i class="el-icon-question font-second"></i>
                            <span class="font-third">
                        非行内说明文本
                    </span>
                        </div>

                    </el-form-item>
                </el-card>

                <el-card v-if="settingOver && form.url_type == setting.url_type_list.site.value"
                         shadow="hover">

                    <el-form-item label="电脑端分类页模板" prop="pc_cate_temp" class="form-item"
                                  :inline-message="true" :error="customErrMsg.pc_cate_temp"
                                  ref="formItem_pc_cate_temp">

                        <el-input placeholder="请选择|输入分类页模板" v-model="form.pc_cate_temp"
                                  class="form-element" size="small">
                            <template slot="prepend">
                                {{getTempBasePath('pc_cate_temp')}}
                            </template>
                            <el-button slot="append" icon="el-icon-folder-checked"
                                       @click="showSelectView('pc_cate_temp')"></el-button>
                        </el-input>

                        <div class="form-element-append-inline" style="display: none;">
                            <el-tooltip class="item" effect="light"
                                        placement="top-start">
                                <div slot="content">
                                    行内说明内容
                                </div>
                                <div>
                                    <i class="el-icon-question font-second pointer"></i>
                                    <span class="font-third">
                                        什么是行内说明？
                                    </span>
                                </div>
                            </el-tooltip>
                        </div>
                        <div class="form-element-append lh-normal mt-5" style="display: none;">
                            <i class="el-icon-question font-second"></i>
                            <span class="font-third">
                                非行内说明文本
                            </span>
                        </div>

                    </el-form-item>

                    <el-form-item label="电脑端列表页模板" prop="pc_list_temp" class="form-item"
                                  :inline-message="true" :error="customErrMsg.pc_list_temp"
                                  ref="formItem_pc_list_temp">

                        <el-input placeholder="请选择|输入列表页模板" v-model="form.pc_list_temp"
                                  class="form-element" size="small">
                            <template slot="prepend">
                                {{getTempBasePath('pc_list_temp')}}
                            </template>
                            <el-button slot="append" icon="el-icon-folder-checked"
                                       @click="showSelectView('pc_list_temp')"></el-button>
                        </el-input>

                        <div class="form-element-append-inline" style="display: none;">
                            <el-tooltip class="item" effect="light"
                                        placement="top-start">
                                <div slot="content">
                                    行内说明内容
                                </div>
                                <div>
                                    <i class="el-icon-question font-second pointer"></i>
                                    <span class="font-third">
                                        什么是行内说明？
                                    </span>
                                </div>
                            </el-tooltip>
                        </div>
                        <div class="form-element-append lh-normal mt-5" style="display: none;">
                            <i class="el-icon-question font-second"></i>
                            <span class="font-third">
                                非行内说明文本
                            </span>
                        </div>

                    </el-form-item>

                    <el-form-item label="电脑端详情页模板" prop="pc_detail_temp" class="form-item"
                                  :inline-message="true" :error="customErrMsg.pc_detail_temp"
                                  ref="formItem_pc_detail_temp">

                        <el-input placeholder="请选择|输入详情页模板" v-model="form.pc_detail_temp"
                                  class="form-element" size="small">
                            <template slot="prepend">
                                {{getTempBasePath('pc_detail_temp')}}
                            </template>
                            <el-button slot="append" icon="el-icon-folder-checked"
                                       @click="showSelectView('pc_detail_temp')"></el-button>
                        </el-input>

                        <div class="form-element-append-inline" style="display: none;">
                            <el-tooltip class="item" effect="light"
                                        placement="top-start">
                                <div slot="content">
                                    行内说明内容
                                </div>
                                <div>
                                    <i class="el-icon-question font-second pointer"></i>
                                    <span class="font-third">
                            什么是行内说明？
                        </span>
                                </div>
                            </el-tooltip>
                        </div>
                        <div class="form-element-append lh-normal mt-5" style="display: none;">
                            <i class="el-icon-question font-second"></i>
                            <span class="font-third">
                                非行内说明文本
                            </span>
                        </div>

                    </el-form-item>

                </el-card>

                <el-card v-if="settingOver && form.url_type == setting.url_type_list.site.value"
                         shadow="hover">

                    <el-form-item label="手机端分类页模板" prop="mob_cate_temp" class="form-item"
                                  :inline-message="true" :error="customErrMsg.mob_cate_temp"
                                  ref="formItem_mob_cate_temp">

                        <el-input placeholder="请选择|输入分类页模板" v-model="form.mob_cate_temp"
                                  class="form-element" size="small">
                            <template slot="prepend">
                                {{getTempBasePath('mob_cate_temp')}}
                            </template>
                            <el-button slot="append" icon="el-icon-folder-checked"
                                       @click="showSelectView('mob_cate_temp')"></el-button>
                        </el-input>

                        <div class="form-element-append-inline" style="display: none;">
                            <el-tooltip class="item" effect="light"
                                        placement="top-start">
                                <div slot="content">
                                    行内说明内容
                                </div>
                                <div>
                                    <i class="el-icon-question font-second pointer"></i>
                                    <span class="font-third">
                                        什么是行内说明？
                                    </span>
                                </div>
                            </el-tooltip>
                        </div>
                        <div class="form-element-append lh-normal mt-5" style="display: none;">
                            <i class="el-icon-question font-second"></i>
                            <span class="font-third">
                                非行内说明文本
                            </span>
                        </div>

                    </el-form-item>

                    <el-form-item label="手机端列表页模板" prop="mob_list_temp" class="form-item"
                                  :inline-message="true" :error="customErrMsg.mob_list_temp"
                                  ref="formItem_mob_list_temp">

                        <el-input placeholder="请选择|输入列表页模板" v-model="form.mob_list_temp"
                                  class="form-element" size="small">
                            <template slot="prepend">
                                {{getTempBasePath('mob_list_temp')}}
                            </template>
                            <el-button slot="append" icon="el-icon-folder-checked"
                                       @click="showSelectView('mob_list_temp')"></el-button>
                        </el-input>

                        <div class="form-element-append-inline" style="display: none;">
                            <el-tooltip class="item" effect="light"
                                        placement="top-start">
                                <div slot="content">
                                    行内说明内容
                                </div>
                                <div>
                                    <i class="el-icon-question font-second pointer"></i>
                                    <span class="font-third">
                                        什么是行内说明？
                                    </span>
                                </div>
                            </el-tooltip>
                        </div>
                        <div class="form-element-append lh-normal mt-5" style="display: none;">
                            <i class="el-icon-question font-second"></i>
                            <span class="font-third">
                                非行内说明文本
                            </span>
                        </div>

                    </el-form-item>

                    <el-form-item label="手机端详情页模板" prop="mob_detail_temp" class="form-item"
                                  :inline-message="true" :error="customErrMsg.mob_detail_temp"
                                  ref="formItem_mob_detail_temp">

                        <el-input placeholder="请选择|输入详情页模板" v-model="form.mob_detail_temp"
                                  class="form-element" size="small">
                            <template slot="prepend">
                                {{getTempBasePath('mob_detail_temp')}}
                            </template>
                            <el-button slot="append" icon="el-icon-folder-checked"
                                       @click="showSelectView('mob_detail_temp')"></el-button>
                        </el-input>

                        <div class="form-element-append-inline" style="display: none;">
                            <el-tooltip class="item" effect="light"
                                        placement="top-start">
                                <div slot="content">
                                    行内说明内容
                                </div>
                                <div>
                                    <i class="el-icon-question font-second pointer"></i>
                                    <span class="font-third">
                            什么是行内说明？
                        </span>
                                </div>
                            </el-tooltip>
                        </div>
                        <div class="form-element-append lh-normal mt-5" style="display: none;">
                            <i class="el-icon-question font-second"></i>
                            <span class="font-third">
                                非行内说明文本
                            </span>
                        </div>

                    </el-form-item>

                </el-card>

                <el-card shadow="hover">
                    <el-form-item label="开启SEO" class="form-item" :inline-message="true"
                                  v-if="settingOver">

                        <el-radio-group v-model="form.setting.open_seo" size="mini"
                                        class="form-element">

                            <el-radio v-for="item in setting.open_seo_list" :label="item.value+''">
                                {{item.text}}
                            </el-radio>

                        </el-radio-group>

                        <div class="form-element-append-inline" style="display: none;">
                            <el-tooltip class="item" effect="light"
                                        placement="top-start">
                                <div slot="content">
                                    行内说明内容
                                </div>
                                <div>
                                    <i class="el-icon-question font-second pointer"></i>
                                    <span class="font-third">
                                        什么是行内说明？
                                    </span>
                                </div>
                            </el-tooltip>
                        </div>
                        <div class="form-element-append lh-normal mt-5" style="display: none;">
                            <i class="el-icon-question font-second"></i>
                            <span class="font-third">
                                非行内说明文本
                            </span>
                        </div>

                    </el-form-item>

                    <el-form-item label="SEO标题" class="form-item" :inline-message="true"
                                  v-if="openSeo">

                        <el-input type="textarea" placeholder="请输入SEO标题" class="form-element"
                                  maxlength="300" show-word-limit type="string"
                                  :autosize="{ minRows: 6}"  v-model="form.setting.seo_title">
                        </el-input>

                        <div class="form-element-append-inline" style="display: none;">
                            <el-tooltip class="item" effect="light"
                                        placement="top-start">
                                <div slot="content">
                                    行内说明内容
                                </div>
                                <div>
                                    <i class="el-icon-question font-second pointer"></i>
                                    <span class="font-third">
                            什么是行内说明？
                        </span>
                                </div>
                            </el-tooltip>
                        </div>
                        <div class="form-element-append lh-normal mt-5">
                            <i class="el-icon-warning font-second"></i>
                            <span class="font-third">
                                支持变量：<br />
                                <code>{SITE_NAME}</code> - 站点名称&nbsp;&nbsp;&nbsp;&nbsp;
                                <code>{CATE_NAME}</code> - 分类名称&nbsp;&nbsp;&nbsp;&nbsp;
                            </span>
                        </div>

                    </el-form-item>

                    <el-form-item label="SEO关键词" class="form-item" :inline-message="true"
                                  v-if="openSeo">

                        <el-input type="textarea" placeholder="请输入SEO关键词"
                                  v-model="form.setting.seo_keywords" type="string"
                                  class="form-element" maxlength="300" show-word-limit
                                  :autosize="{ minRows: 6}">
                        </el-input>

                        <div class="form-element-append-inline" style="display: none;">
                            <el-tooltip class="item" effect="light"
                                        placement="top-start">
                                <div slot="content">
                                    行内说明内容
                                </div>
                                <div>
                                    <i class="el-icon-question font-second pointer"></i>
                                    <span class="font-third">
                            什么是行内说明？
                        </span>
                                </div>
                            </el-tooltip>
                        </div>
                        <div class="form-element-append lh-normal mt-5">
                            <i class="el-icon-warning font-second"></i>
                            <span class="font-third">
                                支持变量：<br />
                                <code>{SITE_NAME}</code> - 站点名称&nbsp;&nbsp;&nbsp;&nbsp;
                                <code>{CATE_NAME}</code> - 分类名称&nbsp;&nbsp;&nbsp;&nbsp;
                            </span>
                        </div>

                    </el-form-item>

                    <el-form-item label="SEO描述" class="form-item" :inline-message="true"
                                  v-if="openSeo">


                        <el-input type="textarea" placeholder="请输入SEO描述"
                                  v-model="form.setting.seo_description" class="form-element"
                                  maxlength="300" show-word-limit type="string"
                                  :autosize="{ minRows: 6}">
                        </el-input>

                        <div class="form-element-append-inline" style="display: none;">
                            <el-tooltip class="item" effect="light"
                                        placement="top-start">
                                <div slot="content">
                                    行内说明内容
                                </div>
                                <div>
                                    <i class="el-icon-question font-second pointer"></i>
                                    <span class="font-third">
                            什么是行内说明？
                        </span>
                                </div>
                            </el-tooltip>
                        </div>
                        <div class="form-element-append lh-normal mt-5">
                            <i class="el-icon-warning font-second"></i>
                            <span class="font-third">
                                支持变量：<br />
                                <code>{SITE_NAME}</code> - 站点名称&nbsp;&nbsp;&nbsp;&nbsp;
                                <code>{CATE_NAME}</code> - 分类名称&nbsp;&nbsp;&nbsp;&nbsp;
                            </span>
                        </div>

                    </el-form-item>
                </el-card>

                <el-card shadow="hover">
                    <el-form-item label="图片" prop="image" class="form-item" :inline-message="true"
                                  :error="customErrMsg.image" ref="formItem_description">

                        <?= $this->render('../common/uploader.php', [
                            'column' => 'form.image',
                            'scenario' => 'news_category'
                        ]) ?>

                    </el-form-item>

                    <el-form-item label="详情" prop="description" class="form-item"
                                  :error="customErrMsg.description" ref="formItem_description"
                                  :inline-message="true">

                        <?= $this->render('../common/html-editor.php', [
                            'column' => 'form.description',
                            'height' => '400',
                            'scenario' => 'news_category'
                        ]) ?>

                        <div class="form-element-append-inline" style="display: none;">
                            <el-tooltip class="item" effect="light"
                                        placement="top-start">
                                <div slot="content">
                                    行内说明内容
                                </div>
                                <div>
                                    <i class="el-icon-question font-second pointer"></i>
                                    <span class="font-third">
                            什么是行内说明？
                        </span>
                                </div>
                            </el-tooltip>
                        </div>
                        <div class="form-element-append lh-normal mt-5" style="display: none;">
                            <i class="el-icon-question font-second"></i>
                            <span class="font-third">
                        非行内说明文本
                    </span>
                        </div>

                    </el-form-item>
                </el-card>

                <el-card shadow="hover">

                    <el-form-item label="附加数据" prop="extra_data" class="form-item"
                                  :inline-message="true" :error="customErrMsg.extra_data"
                                  ref="formItem_url_type">

                        <el-card class="box-card form-element">
                            <div slot="header" class="clearfix">
                                <div class="font-second">
                                    <el-row :gutter="20">
                                        <el-col :span="6" :md="6" :sm="6" :xs="6" align="center"
                                                class="extra-item">
                                            字段名
                                        </el-col>
                                        <el-col :span="6" :md="6" :sm="6" :xs="6" align="center"
                                                class="extra-item">
                                            字段文本
                                        </el-col>
                                        <el-col :span="9" :md="8" :sm="7" :xs="6" align="center"
                                                class="extra-item">
                                            字段默认值
                                        </el-col>
                                        <el-col :span="3" :md="4" :sm="5" :xs="6" align="center">
                                            <el-button type="text" @click="addRowExtra('extra_data')">
                                                添加一条
                                            </el-button>
                                            <div v-else class="display-inline ml-30 mr-30">
                                                &nbsp;
                                            </div>
                                            <el-button type="text" class="text-danger"
                                                       @click="cleanAllExtra('extra_data')">
                                                清空
                                            </el-button>
                                        </el-col>
                                    </el-row>
                                </div>
                            </div>
                            <div class="header-content">
                                <el-row class="extra-group" v-for="(item, key) in form.extra_data">
                                    <el-col :span="6" :md="6" :sm="6" :xs="6" align="center"
                                            class="extra-item pr-15">
                                        <el-input placeholder="请输入字段名" v-model="item.name"
                                                  size="small">

                                        </el-input>
                                    </el-col>
                                    <el-col :span="6" :md="6" :sm="6" :xs="6" align="center"
                                            class="extra-item pr-15">
                                        <el-input placeholder="请输入字段文本" v-model="item.text"
                                                  size="small">

                                        </el-input>
                                    </el-col>
                                    <el-col :span="9" :md="8" :sm="7" :xs="6" align="center"
                                            class="extra-item pr-15">
                                        <el-input placeholder="请输入字段默认值" v-model="item.value"
                                                  size="small">

                                        </el-input>
                                    </el-col>
                                    <el-col :span="3" :md="4" :sm="5" :xs="6" align="center">
                                        <el-button @click="upRowValue('extra_data', key)"
                                                   type="text" size="small">
                                            上移
                                        </el-button>
                                        <el-button @click="downRowValue('extra_data', key)"
                                                   type="text" size="small">
                                            下移
                                        </el-button>
                                        <el-button @click="delRowExtra('extra_data', key)"
                                                   type="text" class="text-danger">
                                            删除
                                        </el-button>
                                    </el-col>
                                </el-row>
                                <div v-if="$w.isEmpty(form.extra_data)">
                                    <el-empty :image-size="100" description="暂无内容，请添加"></el-empty>
                                </div>
                            </div>
                        </el-card>

                        <div class="form-element-append lh-normal mt-5">
                            <i class="el-icon-question font-second"></i>
                            <span class="font-third">
                            什么是【附加数据】？<br />
                            <code>附加数据</code>设置完以后，可以在前台展示或者后台管理的字段中调用出来以供使用，这是为了分类中方便用户自定义某些字段或者数据。如：前台头部，每个分类的class不同，这时就可以使用<code>附加数据</code>，可以在每个分类的详情<code>附加数据</code>字段中添加class附加数据在前台头部调用。
                    </span>
                        </div>

                    </el-form-item>

                </el-card>

            </el-tab-pane>
            <el-tab-pane label="文章数据" name="news">

                <el-card shadow="hover">
                    <el-form-item label="开启SEO" class="form-item" :inline-message="true"
                                  v-if="settingOver">

                        <el-radio-group v-model="form.news_setting.open_seo" size="mini"
                                        class="form-element">

                            <el-radio v-for="item in setting.open_seo_list" :label="item.value+''">
                                {{item.text}}
                            </el-radio>

                        </el-radio-group>

                        <div class="form-element-append-inline" style="display: none;">
                            <el-tooltip class="item" effect="light"
                                        placement="top-start">
                                <div slot="content">
                                    行内说明内容
                                </div>
                                <div>
                                    <i class="el-icon-question font-second pointer"></i>
                                    <span class="font-third">
                                        什么是行内说明？
                                    </span>
                                </div>
                            </el-tooltip>
                        </div>
                        <div class="form-element-append lh-normal mt-5" style="display: none;">
                            <i class="el-icon-question font-second"></i>
                            <span class="font-third">
                                非行内说明文本
                            </span>
                        </div>

                    </el-form-item>

                    <el-form-item label="SEO标题" class="form-item" :inline-message="true"
                                  v-if="openNewsSeo">

                        <el-input type="textarea" placeholder="请输入SEO标题" class="form-element"
                                  maxlength="300" show-word-limit type="string"
                                  :autosize="{ minRows: 6}"  v-model="form.news_setting.seo_title">
                        </el-input>

                        <div class="form-element-append-inline" style="display: none;">
                            <el-tooltip class="item" effect="light"
                                        placement="top-start">
                                <div slot="content">
                                    行内说明内容
                                </div>
                                <div>
                                    <i class="el-icon-question font-second pointer"></i>
                                    <span class="font-third">
                            什么是行内说明？
                        </span>
                                </div>
                            </el-tooltip>
                        </div>
                        <div class="form-element-append lh-normal mt-5">
                            <i class="el-icon-warning font-second"></i>
                            <span class="font-third">
                                支持变量：<br />
                                <code>{SITE_NAME}</code> - 站点名称&nbsp;&nbsp;&nbsp;&nbsp;
                                <code>{CATE_NAME}</code> - 分类名称&nbsp;&nbsp;&nbsp;&nbsp;
                                <code>{NEWS_TITLE}</code> - 文章标题&nbsp;&nbsp;&nbsp;&nbsp;
                            </span>
                        </div>

                    </el-form-item>

                    <el-form-item label="SEO关键词" class="form-item" :inline-message="true"
                                  v-if="openNewsSeo">

                        <el-input type="textarea" placeholder="请输入SEO关键词"
                                  v-model="form.news_setting.seo_keywords" type="string"
                                  class="form-element" maxlength="300" show-word-limit
                                  :autosize="{ minRows: 6}">
                        </el-input>

                        <div class="form-element-append-inline" style="display: none;">
                            <el-tooltip class="item" effect="light"
                                        placement="top-start">
                                <div slot="content">
                                    行内说明内容
                                </div>
                                <div>
                                    <i class="el-icon-question font-second pointer"></i>
                                    <span class="font-third">
                            什么是行内说明？
                        </span>
                                </div>
                            </el-tooltip>
                        </div>
                        <div class="form-element-append lh-normal mt-5">
                            <i class="el-icon-warning font-second"></i>
                            <span class="font-third">
                                支持变量：<br />
                                <code>{SITE_NAME}</code> - 站点名称&nbsp;&nbsp;&nbsp;&nbsp;
                                <code>{CATE_NAME}</code> - 分类名称&nbsp;&nbsp;&nbsp;&nbsp;
                                <code>{NEWS_TITLE}</code> - 文章标题&nbsp;&nbsp;&nbsp;&nbsp;
                                <code>{NEWS_KEYWORDS}</code> - 文章关键词&nbsp;&nbsp;&nbsp;&nbsp;
                            </span>
                        </div>

                    </el-form-item>

                    <el-form-item label="SEO描述" class="form-item" :inline-message="true"
                                  v-if="openNewsSeo">

                        <el-input type="textarea" placeholder="请输入SEO描述"
                                  v-model="form.news_setting.seo_description" class="form-element"
                                  maxlength="300" show-word-limit type="string"
                                  :autosize="{ minRows: 6}">
                        </el-input>

                        <div class="form-element-append-inline" style="display: none;">
                            <el-tooltip class="item" effect="light"
                                        placement="top-start">
                                <div slot="content">
                                    行内说明内容
                                </div>
                                <div>
                                    <i class="el-icon-question font-second pointer"></i>
                                    <span class="font-third">
                            什么是行内说明？
                        </span>
                                </div>
                            </el-tooltip>
                        </div>
                        <div class="form-element-append lh-normal mt-5">
                            <i class="el-icon-warning font-second"></i>
                            <span class="font-third">
                                支持变量：<br />
                                <code>{SITE_NAME}</code> - 站点名称&nbsp;&nbsp;&nbsp;&nbsp;
                                <code>{CATE_NAME}</code> - 分类名称&nbsp;&nbsp;&nbsp;&nbsp;
                                <code>{NEWS_TITLE}</code> - 文章标题&nbsp;&nbsp;&nbsp;&nbsp;
                                <code>{NEWS_DESC}</code> - 文章简介&nbsp;&nbsp;&nbsp;&nbsp;
                            </span>
                        </div>

                    </el-form-item>
                </el-card>
                <el-card shadow="hover">

                    <el-form-item label="文章附加数据" prop="extra_article" class="form-item"
                                  :inline-message="true" :error="customErrMsg.extra_article"
                                  ref="formItem_url_type">

                        <el-card class="box-card form-element">
                            <div slot="header" class="clearfix">
                                <div class="font-second">
                                    <el-row :gutter="20">
                                        <el-col :span="6" :md="6" :sm="6" :xs="6" align="center"
                                                class="extra-item">
                                            字段名
                                        </el-col>
                                        <el-col :span="6" :md="6" :sm="6" :xs="6" align="center"
                                                class="extra-item">
                                            字段文本
                                        </el-col>
                                        <el-col :span="9" :md="8" :sm="7" :xs="6" align="center"
                                                class="extra-item">
                                            字段默认值
                                        </el-col>
                                        <el-col :span="3" :md="4" :sm="5" :xs="6" align="center">
                                            <el-button @click="addRowExtra('extra_article')"
                                                       type="text">
                                                添加一条
                                            </el-button>
                                            <div v-else class="display-inline ml-30 mr-30">
                                                &nbsp;
                                            </div>
                                            <el-button type="text" class="text-danger"
                                                       @click="cleanAllExtra('extra_article')">
                                                清空
                                            </el-button>
                                        </el-col>
                                    </el-row>
                                </div>
                            </div>
                            <div class="header-content">
                                <el-row class="extra-group" v-for="(item, key) in form.extra_article">
                                    <el-col :span="6" :md="6" :sm="6" :xs="6" align="center"
                                            class="extra-item pr-15">
                                        <el-input placeholder="请输入字段名" v-model="item.name"
                                                  size="small">

                                        </el-input>
                                    </el-col>
                                    <el-col :span="6" :md="6" :sm="6" :xs="6" align="center"
                                            class="extra-item pr-15">
                                        <el-input placeholder="请输入字段文本" v-model="item.text"
                                                  size="small">

                                        </el-input>
                                    </el-col>
                                    <el-col :span="9" :md="8" :sm="7" :xs="6" align="center"
                                            class="extra-item pr-15">
                                        <el-input placeholder="请输入字段默认值" v-model="item.value"
                                                  size="small">

                                        </el-input>
                                    </el-col>
                                    <el-col :span="3" :md="4" :sm="5" :xs="6" align="center">
                                        <el-button @click="upRowValue('extra_article', key)"
                                                   type="text" size="small">
                                            上移
                                        </el-button>
                                        <el-button @click="downRowValue('extra_article', key)"
                                                   type="text" size="small">
                                            下移
                                        </el-button>
                                        <el-button @click="delRowExtra('extra_article', key)"
                                                   type="text" class="text-danger">
                                            删除
                                        </el-button>
                                    </el-col>
                                </el-row>
                                <div v-if="$w.isEmpty(form.extra_article)">
                                    <el-empty :image-size="100" description="暂无内容，请添加"></el-empty>
                                </div>
                            </div>
                        </el-card>

                        <div class="form-element-append lh-normal mt-5">
                            <i class="el-icon-question font-second"></i>
                            <span class="font-third">
                            什么是【文章附加数据】？<br />
                            <code>文章附加数据</code>设置完以后，此分类下的文章会出现额外字段可供以填写并在模板中调用，以完成某些分类的特殊字段的需求。如：视频分类需要<code>视频地址</code>，可以填入<code>视频地址</code>字段，此后视频分类下的文章在发布或者更新的时候会有特殊字段<code>视频地址</code>字段。
                    </span>
                        </div>

                    </el-form-item>

                </el-card>

            </el-tab-pane>
        </el-tabs>

    </el-form>
    <div class="form-bottom-free"></div>
</el-main>

<el-footer class="bottom-button" :height="50">
    <el-button size="mini" type="danger" @click="cancel" v-show="pageDialog.isIframe">
        取消
    </el-button>
    <?php if (AdminRoleModel::checkAuth('create')) { ?>
        <el-button size="mini" type="success" @click="submit" v-if="setting.isCreate === true">
            创建
        </el-button>
    <?php } ?>
    <?php if (AdminRoleModel::checkAuth('update')) { ?>
        <el-button size="mini" type="primary" @click="submit" v-if="setting.isCreate === false">
            保存
        </el-button>
    <?php } ?>
</el-footer>
<!--文件夹选择 开始-->
<el-dialog title="请选择模板" :visible.sync="selectViewDia" class="dialog-small scroll-dialog"
           :lock-scroll="true" width="40%" :close-on-click-modal="false">

    <el-tree :load="loadFiles" :props="{isLeaf: 'leaf'}" lazy show-checkbox node-key="id"
             :expand-on-click-node="false" node-key="id" ref="selectFile"
             :check-on-click-node="true" @check="changeSelFile" @node-click="changeSelFile"
             :default-expanded-keys="SelFileDefaultKey" :default-checked-keys="SelFileDefaultKey"
             v-if="selectViewDia">
        <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>
                <i class="el-icon-folder-opened" v-if="data.isFolder == 1"></i>
                <i class="el-icon-document" v-else></i>
                {{ data.name }}
            </span>
            <span>
                <el-button type="text" size="mini" icon="el-icon-refresh" v-if="data.isFolder == 1"
                           @click="loadFiles(node)"></el-button>
            </span>
        </span>
    </el-tree>

    <div slot="footer">
        <el-button type="danger" size="mini" @click="selectViewDia = false">取消</el-button>
        <el-button size="mini" type="primary" @click="saveSelFile">
            保存
        </el-button>
    </div>
</el-dialog>
<!--文件夹选择 结束-->

<?php
Asset::addCss($this, '/plugin/vue-treeselect/css/vue-treeselect.min.css');
Asset::addCss($this, '/css/backend/news-category-form.css');

Asset::addScript($this, '/plugin/vue-treeselect/js/vue-treeselect.min.js');
Asset::addScript($this, '/js/backend/news-category-form.js');

$isCreate = !isset($isCreate) || !$isCreate ? 'false' : 'true'; // 是否新建
$this->registerJs('instance = new app(' . $isCreate . ');');
?>
